﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body id="acModel">
    <div id="msg"></div>
    <button data-bind="click:acSave">提交</button>
    <button data-bind="click:acGet">提取</button>

    <input type="file" id="uploadfile" name="uploadfile" value="文件" />
    <button type="button" data-bind="click:upload">上传</button>

    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/json2.js"></script>
    <script src="Scripts/base64.js"></script>
    <script src="Scripts/knockout-3.3.0.js"></script>
    <script src="Scripts/knockout.validation.js"></script>
    <script type="text/javascript">
        var uri = "http://127.0.0.1:8089/api/books";
        function acvm() {
            var self = this;
            self.Title = ko.observable().extend({ required: true, minLength: 3, maxLength: 64 });
            self.ReleaseDate = ko.observable().extend({ required: true });
            self.Genre = ko.observable().extend({ required: true, minLength: 3, maxLength: 64 });
            self.Price = ko.observable().extend({ required: true });

            var time = new Date();
            self.ReleaseDate(time);
            self.Title("titleweb");
            self.Genre("genreweb");
            self.Price(1000);

            self.getjson = function () {
                var book = new Object();
                book.Title = self.Title();
                book.Genre = self.Genre();
                book.Price = self.Price();
                book.ReleaseDate = self.ReleaseDate();
                return JSON.stringify(book);
            };

            var send = XMLHttpRequest.prototype.send;
            var token = "Basic " + base64.encode("jac:jac");
            XMLHttpRequest.prototype.send = function (data) {
                this.setRequestHeader('Authorization', token);
                return send.apply(this, arguments);
            };

            self.upload = function () {
                var xhr = new XMLHttpRequest();
                var file = document.getElementById("uploadfile");
                var formData = new FormData();
                formData.append("upload", file.files[0]);
                xhr.open("post", "http://127.0.0.1:8089/api/file/upload");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) {
                        return false;
                    }
                    if (xhr.status != 200) {
                        $("#msg").html(xhr.responseText + " " + xhr.status);
                        return false;
                    }
                    $("#msg").html(JSON.stringify(xhr.responseText));
                    return true;
                };
                xhr.send(formData);  /* Send to server */
            }

            self.acGet = function () {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', encodeURI(uri + "?_=" + Math.random()));//增加随时数到连接尾部防止浏览器缓存
                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) {
                        return false;
                    }
                    if (xhr.status != 200) {
                        $("#msg").html(xhr.responseText + " " + xhr.status);
                        return false;
                    }
                    $("#msg").html(JSON.stringify(xhr.responseText));
                    return true;
                };
                xhr.send();
            }

            //提交(Book book)形式
            self.acSave = function () {
                if (self.isValid()) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', encodeURI(uri));
                    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState != 4) {
                            return false;
                        }
                        if (xhr.status != 200) {
                            $("#msg").html(xhr.responseText + " " + xhr.status);
                            return false;
                        }
                        var data = JSON.parse(xhr.responseText);
                        $("#msg").html('post result is ' + JSON.stringify(data));
                        return true;
                    };
                    xhr.send(self.getjson());
                } else {
                    $("#msg").html("数据验证失败！");
                }
            };
        }
        var dvvm = new acvm();
        ko.applyBindings(ko.validatedObservable(dvvm), document.getElementById("acModel"));
    </script>
</body>
</html>
